<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-type" content="text/html; charset=utf-8">
        <title>Combo KML Example</title>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js" type="text/javascript"></script>
        <script src="examples.js" type="text/javascript"></script>
        <script src="https://www.google.com/jsapi?autoload=%7B%22modules%22%3A%5B%7B%22name%22%3A%22earth%22%2C%22version%22%3A%221%22%7D%5D%7D&key=ABQIAAAAbEBR9v0lqBFdTfOcbe5WjRQPjtdHQ3xdBuNAR-KDFOW1mqdVsRRmZhmrl-MOSGS44M9Gug9FdssEgQ" type="text/javascript" charset="utf-8"></script>
        <script id="sample" type="text/example" charset="utf-8">
        
            var tree;
            var gex;

            $(document).ready(function(){
                google.earth.createInstance('map3d', init, failure);                
            });

            function init(ge) {
                ge.getWindow().setVisibility(true);
                gex = new GEarthExtensions(ge);      

                $('#submit').show();
                $('#urlform').submit(function(e){
                    e.preventDefault();
                    if(tree && tree.destroy){
                        tree.destroy();
                    }
                    $('#tree').replaceWith('<div id="tree" class="tree"></div>');
                    var url = $('#url').attr('value');
                    if(url){
                        tree = kmltree({
                            url: url,
                            gex: gex, 
                            mapElement: $('#map3d'), 
                            element: $('.tree'),
                            restoreState: false
                        });
                        tree.load();
                        $('#refresh').show();
                    }else{
                        alert('you must enter a url');
                    }
                });
                $('#refresh').click(function(e){
                    tree.refresh();
                    e.preventDefault();
                });
            }

            function failure(errorCode) {
                alert('failed to load plugin');
            }
            
        </script>
    </head>
    <body>
        <div class="content">
            <p class="description">
                This example demonstrates one of kmltree's most useful 
                features, state restoration. Load any kml file with the 
                following form, and expand/contract folders, toggle features, 
                etc. Hitting refresh will reload the tree, preserving your 
                changes.
            </p>
            <form style="margin:0px; padding:0;padding-left:10px;" id="urlform">
                <input style="width:500px;" type="text" name="url" value="http://kmltree.googlecode.com/hg/examples/demo.kmz" id="url" autofocus>
                <input type="submit" id="submit" name="submit">
                <button id="refresh" style="display:none;">refresh</button>
            </form>
        </div>
    </body>
</html>